<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="userIndex">
        <template id="userIndex">
            <div>
                <user-head></user-head>
                <el-table v-bind:data="tableData" size="mini" stripe>
                    <el-table-column label="手机号" prop="mobile"></el-table-column>
                    <el-table-column label="姓名" prop="name"></el-table-column>
                    <el-table-column label="是否在线" prop="isOnline">
                        <template slot-scope="props">
                            <p style="color: #409eff" v-if="props.row.isOnline==1" key="1">在线</p>
                            <p style="color: #F56C6C" v-if="props.row.isOnline!=1" key="0">离线</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="最后登录日时" prop="lastLoginDateTime"></el-table-column>
                    <el-table-column label="注册日时" prop="registeredDateTime"></el-table-column>
                    <el-table-column label="图标" prop="icon"></el-table-column>
                    <el-table-column label="是否启用" prop="isEnabled">
                        <template slot-scope="props">
                            <el-switch v-bind:title="props.row.isEnabled?'已启用':'已禁用'" v-bind:change="handleChange" v-model="props.row.isEnabled" active-color="#13ce66" inactive-color="#ff4949" active-text="启" inactive-text="禁"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button v-on:click="handleEdit(scope.$index, scope.row)" title="编辑" size="mini" icon="el-icon-edit" type="primary" circle></el-button>
                            <el-popconfirm @confirm="confirmDeleteHandle(scope.$index, scope.row)" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="是否确定删除？">
                                <el-button slot="reference" title="删除" size="mini" icon="el-icon-delete" type="danger" circle></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination align="left" size="mini" @size-change="handlePageSizeChange" @current-change="handleCurrentPageChange" :current-page="currentPage" :page-sizes="[7, 20,30, 40, 50, 60, 70, 80, 90, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount" style="padding: 5px"></el-pagination>
                <updated-user-modal :show_updated_user_modal="isShowUpdatedUserModal" @updated_modal_close="updatedModalClose"></updated-user-modal>
            </div>
        </template>
        <script th:src="@{/this/js/system/user/UserIndex.js}"></script>
        <link rel="stylesheet" th:href="@{/this/css/UserIndex.css}"/>
    </div>
</html>